import React, {useState} from "react"
import "../../../../assets/scss/pages/release-form.scss"
import {
  Button,
  CardBody,
  CardFooter,
  Col, CustomInput,
  FormGroup,
  Input, InputGroup,
  InputGroupAddon, InputGroupText, Label, Modal, ModalBody, ModalFooter, ModalHeader,
  Row,
  UncontrolledTooltip
} from "reactstrap";
import {Copy, Question} from "./icons";
import {SET_RELEASE_INFO_FIELD} from "../../../../redux/constants/releaseDetail/tabInfo";
import DataAndTime from "./DataAndTime";
import Select from "react-select";
import {AvForm, AvGroup} from "availity-reactstrap-validation";
import FullLoadingSpinner from "../../../../components/@vuexy/spinner/Full-loading-spinner";
import SelectProject from "../../../../components/general/SelectProject";
import {RELEASE_MODAL_FIELD} from "../../../../redux/constants/releases";
import {SET_CONTACT_FIELD} from "../../../../redux/constants/eventDetail/tabContacts";
import * as Icon from "react-feather";
import {Trash} from "react-feather";
import {FileUpload} from "../../../../components/general/FileUpload";
import {SET_TASK_FILE} from "../../../../redux/constants/tasks";
import AddArtists from "./AddArtists";


const ReleaseInfo = props => {
  const {data, activeStage, stages, types, genres, subgenres, verifyId} = props;
  const {setFieldData, setActiveStage} = props;
  const [isValid, setIsValid] = useState({
    name: false,
    budget: false,
    type: false,
    release_link: false,
    entry_year: false,
    genre: false,
    subgenre: false,
    releases_date: false,
    cover: false,
    divider_artists: false,
  })
  const [isAddArtists, setIsAddArtists] = useState(false)

  const years = (new Array((new Date()).getFullYear() - 1950)).fill(0)
    .map((_, id) => {
      return {
        value: (new Date()).getFullYear() - id,
        label: (new Date()).getFullYear() - id,
      }
    })

  const CopyText = text => {
    let textarea = document.createElement("textarea");
    document.body.appendChild(textarea);
    textarea.value = text;
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
  }
  const setGenre = e => {
    setFieldData(SET_RELEASE_INFO_FIELD, 'subgenre', null)
    setFieldData(SET_RELEASE_INFO_FIELD, 'genre', e)
  }

  const goPrev = () => {
    setActiveStage(activeStage - 1 >= 0 ? activeStage - 1 : 0)
  }
  const goNext = () => {
    const valid = {
      ...isValid,
      name: data.name == null || data.name.trim() === '',
      budget: data.budget < 0 || !data.budget,
      type: data.type == null || !data.type.id,
      release_link: data.release_link == null || data.release_link.trim() === '',
      entry_year: data.entry_year == null,
      genre: data.genre == null || !data.genre.id,
      subgenre: data.subgenre == null || !data.subgenre.id,
      releases_date: data.releases_date == null,
      cover: data.cover == null || !data.cover.id,
      divider_artists: data.divide ? data.divider_artists.length === 0 : false,
    }

    setIsValid(valid)

    if (!Object.values(valid).some(value => value))
      setActiveStage(activeStage + 1 < stages.length ? activeStage + 1 : stages.length - 1)
  }

  const fileUploaded = file => {
    setFieldData(SET_RELEASE_INFO_FIELD, 'cover', file)
  }


  return (
    <div>
      <AddArtists setFieldData={setFieldData} setIsAddArtists={setIsAddArtists} isAddArtists={isAddArtists}
                  data={data}/>
      <CardBody className="pb-0 pt-2 card-bdy">
        <Row>
          <Col md={6} className="mt-1 mt-md-0">
            <Row>
              <Col sm={6} md={12} xl={5} className="col-1800 col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <span className="name">Название релиза</span>
                  <span id="release-name-tooltip">
                  <Question/>
                  <UncontrolledTooltip
                    placement="top"
                    target="release-name-tooltip"
                  >
                    Hello World!
                  </UncontrolledTooltip>
                </span>
                  <span className="required">*</span>
                </div>
              </Col>
              <Col>
                <FormGroup>
                  <Input
                    type="text"
                    value={data.name || ''}
                    onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'name', e.target.value)}
                    id="release-name"
                    name="release-name"
                    className="colored-input"
                    invalid={isValid.name}
                  />
                  {isValid.name ? <span className="invalid-tooltip d-block">Введите название релиза</span> : ''}
                </FormGroup>
              </Col>
            </Row>
          </Col>
          <Col md={6} className="mt-1 mt-md-0">
            <Row>
              <Col xl={5} className="col-1800 col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <span className="name">Дата релиза</span>
                  <span id="release-date-tooltip">
                  <Question/>
                  <UncontrolledTooltip
                    placement="top"
                    target="release-date-tooltip"
                  >
                    Hello World!
                  </UncontrolledTooltip>
                </span>
                  <span className="required">*</span>
                </div>
              </Col>
              <Col>
                <DataAndTime invalid={isValid.releases_date}
                             setFieldData={e => setFieldData(SET_RELEASE_INFO_FIELD, 'releases_date', e)}
                             date={data.releases_date}/>
              </Col>
            </Row>
          </Col>
        </Row>

        <Row className="mt-md-3">
          <Col md={6} className="mt-1 mt-md-0">
            <Row>
              <Col sm={6} md={12} xl={5} className="col-1800 col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <span className="name">Тип релиза</span>
                  <span id="release-type-tooltip">
                  <Question/>
                  <UncontrolledTooltip
                    placement="top"
                    target="release-type-tooltip"
                  >
                    Hello World!
                  </UncontrolledTooltip>
                </span>
                  <span className="required">*</span>
                </div>
              </Col>
              <Col>
                <Select
                  classNamePrefix="select"
                  value={data.type && {...data.type, value: data.type.id, label: data.type.name}}
                  name="color"
                  onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'type', e)}
                  className={`${isValid.type ? 'invalid-select' : ''} React`}
                  options={types && types.map(value => {
                    return {
                      ...value,
                      value: value.id,
                      label: value.name
                    }
                  })}
                />
              </Col>
            </Row>
          </Col>
          <Col md={6} className="mt-1 mt-md-0">
            <Row>
              <Col xl={5} className="col-1800 col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <span className="name">Дата предрелиза</span>
                  <span id="prerelease-date-tooltip">
                  <Question/>
                  <UncontrolledTooltip
                    placement="top"
                    target="prerelease-date-tooltip"
                  >
                    Hello World!
                  </UncontrolledTooltip>
                </span>
                </div>
              </Col>
              <Col>
                <DataAndTime setFieldData={e => setFieldData(SET_RELEASE_INFO_FIELD, 'prereleases_date', e)}
                             date={data.prereleases_date}/>
              </Col>
            </Row>
          </Col>
        </Row>

        <Row className="mt-md-3">
          <Col md={6} className="mt-1 mt-md-0">
            <Row>
              <Col sm={6} md={12} lg={6} xl={5} className="col-1800 col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <span className="name">Жанр</span>
                  <span id="genre-tooltip">
                  <Question/>
                  <UncontrolledTooltip
                    placement="top"
                    target="genre-tooltip"
                  >
                    Hello World!
                  </UncontrolledTooltip>
                </span>
                  <span className="required">*</span>
                </div>
              </Col>
              <Col>
                <Select
                  classNamePrefix="select"
                  value={data.genre && {...data.genre, value: data.genre.id, label: data.genre.name}}
                  name="color"
                  onChange={setGenre}
                  className={`${isValid.genre ? 'invalid-select' : ''} React`}
                  options={genres && genres.map(value => {
                    return {
                      ...value,
                      value: value.id,
                      label: value.name
                    }
                  })}
                />
              </Col>
            </Row>
          </Col>
          <Col md={6} className="mt-1 mt-md-0">
            <Row>
              <Col sm={6} md={12} lg={6} xl={5} className="col-1800 col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <span className="name">Поджанр</span>
                  <span id="subgenre-tooltip">
                  <Question/>
                  <UncontrolledTooltip
                    placement="top"
                    target="subgenre-tooltip"
                  >
                    Hello World!
                  </UncontrolledTooltip>
                </span>
                  <span className="required">*</span>
                </div>
              </Col>
              <Col>
                <Select
                  classNamePrefix="select"
                  value={data.subgenre && {...data.subgenre, value: data.subgenre.id, label: data.subgenre.name}}
                  name="color"
                  onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'subgenre', e)}
                  className={`${isValid.subgenre ? 'invalid-select' : ''} React`}
                  options={subgenres && subgenres.map(value => {
                    return {
                      ...value,
                      value: value.id,
                      label: value.name
                    }
                  })}
                />
              </Col>
            </Row>
          </Col>
        </Row>


        <Row className="mt-md-3">
          <Col md={6} className="mt-1 mt-md-0">
            <Row>
              <Col sm={6} md={12} lg={6} xl={5} className="col-1800 col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <span className="name">Ссылка на релиз</span>
                  <span id="release-link-tooltip">
                    <Question/>
                    <UncontrolledTooltip
                      placement="top"
                      target="release-link-tooltip"
                    >
                      Hello World!
                    </UncontrolledTooltip>
                  </span>
                  <span className="required">*</span>
                </div>
              </Col>
              <Col>
                <FormGroup>
                  <div className="position-relative">
                    <Input
                      type="text"
                      className="colored-input"
                      value={data.release_link || ''}
                      onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'release_link', e.target.value)}
                      id="release-link"
                      invalid={isValid.release_link}
                      name="release-link"
                    />
                    {
                      !isValid.release_link &&
                      <div onClick={() => CopyText(data.release_link)}
                           className="copy-icon" tabIndex="0">
                        <Copy/>
                      </div>
                    }
                  </div>
                  {isValid.release_link ? <span className="invalid-tooltip d-block">Введите ссылку на релиз</span> : ''}
                </FormGroup>
              </Col>
            </Row>
          </Col>
          <Col md={6} className="mt-1 mt-md-0">
            <Row>
              <Col sm={6} md={12} lg={6} xl={5} className="col-1800 col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <span className="name">Год записи</span>
                  <span id="entry_year-tooltip">
                  <Question/>
                  <UncontrolledTooltip
                    placement="top"
                    target="entry_year-tooltip"
                  >
                    Hello World!
                  </UncontrolledTooltip>
                </span>
                  <span className="required">*</span>
                </div>
              </Col>
              <Col>
                <Select
                  classNamePrefix="select"
                  value={data.entry_year && {value: data.entry_year, label: data.entry_year}}
                  name="color"
                  onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'entry_year', e.value)}
                  className={`${isValid.entry_year ? 'invalid-select' : ''} React colored-input`}
                  options={years}
                />
              </Col>
            </Row>
          </Col>
        </Row>

        <Row className="mt-md-3">
          <Col md={6} className="mt-1 mt-md-0">
            <Row>
              <Col xl={5} className="d-flex col-1800 col-1620">
                <div>
                  <span className="name">Обложка</span>
                  <span id="cover-tooltip">
                    <Question/>
                    <UncontrolledTooltip
                      placement="top"
                      target="cover-tooltip"
                    >
                      Hello World!
                    </UncontrolledTooltip>
                  </span>
                  {verifyId && <span className="required">*</span>}
                </div>
              </Col>
              <Col>
                <FileUpload verifyId={verifyId} withoutAuth={true} userId={data.project.owner.id} invalid={isValid.cover}
                            type={'Release'} file={data.cover} fileUploaded={fileUploaded}/>
              </Col>
            </Row>
          </Col>
          <Col md={6} className="mt-1 mt-md-0">
            <Row>
              <Col sm={6} md={12} lg={6} xl={5} className="col-1800 col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <span className="name">Ссылка на промо</span>
                  <span id="promo_link-tooltip">
                    <Question/>
                    <UncontrolledTooltip
                      placement="top"
                      target="promo_link-tooltip"
                    >
                      Hello World!
                    </UncontrolledTooltip>
                  </span>
                </div>
              </Col>
              <Col>
                <FormGroup>
                  <div className="position-relative">
                    <Input
                      type="text"
                      className="colored-input"
                      value={data.promo_link || ''}
                      onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'promo_link', e.target.value)}
                      id="promo_link"
                      name="promo_link"
                    />
                    <div onClick={() => CopyText(data.promo_link)}
                         className="copy-icon" tabIndex="0">
                      <Copy/>
                    </div>
                  </div>
                </FormGroup>
              </Col>
            </Row>
          </Col>
        </Row>

        <Row className="mt-md-3">
          <Col md={6} className="mt-1 mt-md-0">
            <Row>
              <Col sm={6} md={12} lg={6} xl={5} className="col-1800 col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <span className="name">Делить выплаты</span>
                  <span id="divide-tooltip">
                  <Question/>
                  <UncontrolledTooltip
                    placement="top"
                    target="divide-tooltip"
                  >
                    Hello World!
                  </UncontrolledTooltip>
                </span>
                </div>
              </Col>
              <Col>
                <div className="d-flex">
                  <div className="h-100 d-flex align-items-center mr-1">
                    <CustomInput
                      id={Math.random() * 1000}
                      type="switch"
                      className={`${isValid.divider_artists ? 'custom-switch-danger' : 'custom-switch-primary'}`}
                      checked={data.divide}
                      onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'divide', e.target.checked)}
                      name="primary"
                    />
                  </div>
                  <span onClick={() => setIsAddArtists(true)}
                        className={`${isValid.divider_artists ? 'text-danger' : 'text-primary'} cursor-pointer`}>добавить артистов</span>
                </div>
              </Col>
            </Row>
          </Col>
          <Col md={6} className="mt-1 mt-md-0">
            <Row>
              <Col sm={6} md={12} lg={6} xl={5} className="col-1800 col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <span className="name">Бюджет на промо</span>
                  <span id="budget-promo-tooltip">
                    <Question/>
                    <UncontrolledTooltip
                      placement="top"
                      target="budget-promo-tooltip"
                    >
                      Hello World!
                    </UncontrolledTooltip>
                  </span>
                  <span className="required">*</span>
                </div>
              </Col>
              <Col>
                <FormGroup>
                  <InputGroup>
                    <Input
                      type="number"
                      className="colored-input"
                      value={data.budget || ''}
                      onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'budget', e.target.value)}
                      id="budget"
                      name="budget"
                      min="0"
                      invalid={isValid.budget}
                    />
                    <InputGroupAddon addonType="append">
                      <InputGroupText>руб.</InputGroupText>
                    </InputGroupAddon>
                  </InputGroup>
                  {isValid.budget ? <span className="invalid-tooltip d-block">Введите бюджет</span> : ''}
                </FormGroup>
              </Col>
            </Row>
          </Col>
        </Row>

      </CardBody>

      <CardFooter className="border-0 pt-0 d-flex justify-content-between flex-wrap w-100 mt-3">
        <Button.Ripple className="cursor-pointer mt-1" onClick={goPrev} outline color="primary">Предыдущий
          шаг</Button.Ripple>
        <Button.Ripple className="cursor-pointer mt-1" onClick={goNext} color="primary">Следующий шаг</Button.Ripple>
      </CardFooter>
    </div>
  )
}

export default ReleaseInfo

